
import {inject,observer} from "mobx-react"
import {Card,Tag , Button,Modal,Form , Select, message } from "antd"
import { roleList } from '@/utils';
import moment from "moment"
import {useContext,useEffect, useState,useRef } from "react"
import { history } from 'umi';
import { GolBalContext } from '@/redux/index';
import { ajax } from '@/services';
import { changeBanjiList } from './../../redux/action';
const tailLayout1 = {
  wrapperCol:{
      span:14,
      offset:0
  }
}
function MinePage({info,history}){
  const {userInfo} = info;
  const {state,dispatch} = useContext(GolBalContext)
  const [visible,setVisible] = useState(false)
  const getBanjiList = async (options)=>{
    let {code,result}  = await ajax.getbanjilist(options)
    if(code==200){
      dispatch(changeBanjiList(result))
    }
  }
  const form:any = useRef()

  useEffect(()=>{
    
  },[])

  const handleOk = ()=>{
    form.current.validateFields()
    .then(async value=>{
      let {code,result} = await ajax.updateuserbanji(value)
      if(code==200){
        info.changeUserInfo({
          ...userInfo,
          banji:value.banji
        })
        setVisible(false)
      } 
    })
    .catch(err=>{
      message.error("请选择班级")
    })
  }
  const handleCancel =()=>{
    setVisible(false)
  }
  const showModal =()=>{
    getBanjiList({})
    setVisible(true)
  }
  return (
    <div>
       <h2> 个人信息   </h2>
      {
        userInfo &&  <Card 
        size="small" 
        title={userInfo.username} 
        extra={<a >
          { moment(userInfo.time).format('YYYY-MM-DD hh:mm:ss')   }
        </a>} style={{ width: 300 , marginTop:15  }}>
        <p style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span>身份: </span>
          <Tag color="red">
            {roleList.find((item)=>item.value==userInfo.role).text} 
          </Tag>
        </p>
        <p style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span>手机号: </span>
          <Tag color="blue">
            {userInfo.phone} 
          </Tag>
        </p>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span>密码: </span>
          <div>
          <span> {userInfo.password } </span>
          <Button type="primary" onClick={()=>history.push("/main/userinfo/changepass")}  size="small" danger style={{margin:"4px"}}>修改密码</Button>
          </div>
        </div>

        {
          userInfo.role==1&&<div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <span>班级 : </span>
          {
            userInfo.banji? ( 
              <div>
                 <Tag color="#123456">
            {userInfo.banji} 
          </Tag> <Button onClick={showModal} danger type="primary"  size="small"  style={{margin:"4px"}}>修改班级</Button>
              </div>
          )
          : <Button onClick={showModal} type="primary"  size="small"  style={{margin:"4px"}}>设置班级</Button>
          }
        </div>
        }
      </Card>
      }

      <Modal
         title="设置我的班级" 
        visible={visible} 
        onOk={handleOk} 
        onCancel={handleCancel}
        cancelText="取消"
        okText="确认"
        >
          <Form
            name="basic"
            initialValues={{ }}
            autoComplete="off"
            className="login-form"
            ref={form}
            layout={'vertical'}
          >
               <Form.Item
                {...tailLayout1}
                  name="banji"
                  label="班级选择"
                  rules={[{ required: true, message: '请选择' }]}
                >
                  <Select>
                    {
                      state.get("banjiList").map((l,i)=>{
                        return (
                          <Select.Option key={i} value={l.name}>
                              {l.name}
                          </Select.Option>
                        )
                      })
                    }
                  </Select>

                </Form.Item>
          </Form>
      </Modal>
    </div>
  )
}

export default inject('info')(observer(MinePage))